<extend name="./Public/base" />
<block name="title">课程管理</block>
<block name="head">
    <load href="__PUBLIC__/Css/course.css"/>
</block>

<block name="header">
    <include file="Application/Home/View/Public/header_tea.html"/>
</block>
<block name="main">
    <div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>
    <div class="container div-course">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <button class="btn btn-default margin-bottom-10" id="btn-add-course" data-loading-text="Loading..." data-loading-text="加载中...">添加课程</button>
            </div>
        </div>
        <div class="row">
            <if condition="($courses | count) gt 0">
                <div class="col-md-10 col-md-offset-1">
                    <table class="table table-hover ">
                        <tr class="table-header">
                            <!-- <th><input type="checkbox" class="select-all"></th> -->
                            <th>课程名称</th>
                            <th>课程代码</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <volist name="courses" id="cou">
                            <!-- 添加课程时动态显示 -->
                            <tr class="course-row" value="{$cou.cou_id}">
                                <!-- <td><input type="checkbox"></td> -->
                                <td><a href="__MODULE__/TeaClass/classes?cd={$cou.cou_id}">{$cou.cou_name}</a></td>
                                <td>{$cou.cou_code}</td>
                                <td>
                                    <if condition="$cou.is_available eq 0">
                                        不可用
                                        <else/>
                                        可用
                                    </if>
                                </td>
                                <td class="edit-course">
                                    <span class="span-edit glyphicon glyphicon-option-horizontal" title="编辑"></span>
                                    <span class="span-del glyphicon glyphicon-option-horizontal" title="删除"></span>
                                </td>
                            </tr>
                        </volist>
                    </table>
                </div>
            <else />
                <div class="col-md-10 col-md-offset-1 display-hint">
                    <p>点击上方创建课程按钮创建一个课程</p>
                </div>
            </if>
        </div>
        <!-- count:课程个数 page:总页数 np:当前页数 -->
        <div class="row">
            <if condition="$pageinfo['page'] gt 1">
                <div class="col-md-3 col-md-offset-5">
                    <ul class="pagination">
                        <li><a href="__MODULE__/TeaCourse/course?np=1">&laquo;首页</a></li>
                        <if condition="$pageinfo['np']-1 gt 0">
                        <li><a href="__MODULE__/TeaCourse/course?np={$pageinfo['np']-1}">{$pageinfo['np']-1}</a></li>
                        </if>
                        <li class="active"><a href="javasript:;">{$pageinfo.np}</a></li>
                        <if condition="$pageinfo['np']+1 elt $pageinfo['page']">
                        <li><a href="__MODULE__/TeaCourse/course?np={$pageinfo['np']+1}">{$pageinfo['np']+ 1}</a></li>
                        </if>
                        <li><a href="__MODULE__/TeaCourse/course?np={$pageinfo.page}">末页&raquo;</a></li>
                    </ul> 
                </div>
            </if>
        </div>
        <!-- 删除课程modal -->
        <div class="modal fade" id="del-confirm" role="dialog" aria-labelledby="del-course">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title text-danger">删除课程</h4>
                    </div>
                    <div class="modal-body">
                        <p>是否删除课程</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-del" type="button" class="btn btn-danger">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加课程modal -->
        <div class="modal fade" id="add-course-modal" role="dialog" aria-labelledby="add-course">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">添加课程</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="course_name" placeholder="请输入课程名"
                                           required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="course_code"
                                           pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
                                </div>
                                <div class="form-group checkbox">
                                    <label>
                                        <input  type="checkbox" id="is_available"/>是否立即启用
                                    </label>
                                </div>
                            </form>
                            <div class="col-md-6">
                                <p class="text-info">同一名老师下的课程名不允许重复</p></br>
                                <p class="text-info">课程代号可以填写教务处的代码,如果不清楚,请空缺</p>
                                <p class="text-info">选择立即启用课程后,学生可以通过课程名找到该课程</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-mod-add" type="button" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改课程modal -->
        <div class="modal fade" id="edit-course-modal" role="dialog" aria-labelledby="edit-course">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">修改课程信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程名称</label>
                                <div class="col-sm-6">
                                    <p class="form-control-static" id="edit-course-name"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程代码</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="edit-course-code"
                                           pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-3">
                                    <div class="checkbox">
                                        <label>
                                            <input value="1" type="checkbox" id="edit-is-available"/>是否可用
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <span class="text-danger">停用课程后，学生不能找到该课程</span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-mod-edit" type="button" class="btn btn-primary">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){

            var btn_add_course = $("#btn-add-course");
            var btn_mod_add = $("#btn-mod-add");
            var obj_name = $("#course_name");
            var obj_code = $("#course_code");
            var obj_available = $("#is_available"); // 添加表单对象

            var obj_edit = $(".span-edit");
            var btn_mod_edit = $("#btn-mod-edit");
            var input_edit_name = $("#edit-course-name");
            var input_edit_code = $("#edit-course-code");
            var input_is_available = $("#edit-is-available");
            var upd_id; // 更新的id


            var obj_delete = $(".span-del");
            var del_id; // 保存需要删除的值



            /*// 处理全选框
             var chebox_all = $(".select-all");
             var chebox_item = $(".course-row :checkbox")
             chebox_item.click(function() {
             alert($(".course-row :checked").length);
             });
             chebox_all.click(function() {
             chebox_item.prop("checked", $(this).is(":checked"));
             });*/

            // 显示和隐藏编辑按钮
            $(".table tr").mouseenter(function() {
                $(this).find(".edit-course span:first-child").removeClass("glyphicon-option-horizontal").addClass("glyphicon-pencil");
                $(this).find(".edit-course span:last-child").removeClass("glyphicon-option-horizontal").addClass("glyphicon-remove");
            });
            $(".table tr").mouseleave(function() {
                $(this).find(".edit-course span").removeClass("glyphicon-pencil").removeClass("glyphicon-remove").addClass("glyphicon-option-horizontal");
            });

            btn_add_course.click(function() {
                $("#add-course-modal").modal("toggle");
                
            });
            
            // 添加课程
            btn_mod_add.click(function() {
                $(this).button('loading');
                var course_name = obj_name.val();
                var course_code = obj_code.val();
                var available = obj_available.is(":checked");
                if(available){
                    available = 1;
                }
                else{
                    available = 0;
                }
                if(course_name != ""){
                    postData = {cou_name:course_name,cou_code:course_code,is_available:available};
                    postApi("__MODULE__/TeaCourse/addCourse", postData, function(err, data){
                        if (err) {
                            //status==0 表明验证是错误的,错误信息在message中
                            showError(err.message);
                        } else {
                            $("#add-course-modal").modal("toggle");
                            showSuccessReload(data.message);
                        }
                    });
                } else {
                    showError("课程名不能为空");
                    obj_name.focus();
                }
                $(this).button('reset');
            });

            // 修改课程信息
            obj_edit.click(function() {
                $("#edit-course-modal").modal("toggle");

                var parents = $(this).parents(".course-row");
                upd_id = parents.attr("value"); // 保存当前修改的课程id
                if ($.trim(parents.find("td:nth-child(3)").text()) === '可用') {
                    input_is_available.attr("checked", "checked");
                }
                input_edit_code.val(parents.find("td:nth-child(2)").text());
                input_edit_name.text(parents.find("td:nth-child(1)").text());
            });

            btn_mod_edit.click(function() {
                var is_available = input_is_available.is(":checked");
                if(is_available){
                    is_available = 1;
                }
                else{
                    is_available = 0;
                }
                postData = {cou_id:upd_id,cou_code:input_edit_code.val(),is_available:is_available};
                postApi("__MODULE__/TeaCourse/updateCourse", postData, function(err, data){
                    if (err) {
                        //status==0 表明验证是错误的,错误信息在message中
                        showError(err.message);
                    } else {
                        location.assign("__MODULE__/TeaCourse/course");
                    }
                });
            });

            // 确认删除课程
            $("#btn-del").click(function(){
                $("#del-confirm").modal("toggle");
                postApi("__MODULE__/TeaCourse/deleteCourseConfirm", {cou_id:del_id}, function(err, data) {
                    if (err) {
                        //删除失败
                        showError(err.message);
                    } else {
                        // 删除成功
                        showSuccess(data.message);
                        $(".course-row[value='"+del_id+"']").fadeOut("slow"); // 不刷新页面
                    }
                });
            });

            // 监听删除按钮
            obj_delete.click(function() {
                del_id = $(this).parents(".course-row").attr("value");
                var del_name = $(this).parents(".course-row").find("td:first-child").text()
                $("#del-confirm").find(".modal-body p").text("是否删除课程 " + del_name);
                postApi("__MODULE__/TeaCourse/deleteCourse", {cou_id:del_id}, function(err, data) {
                    if (err) {
                        //删除失败
                        showError(err.message);
                    } else {
                        // 可以删除，弹出确认框
                        $("#del-confirm").modal("toggle");
                    }
                });
            });
        });
    </script>
</block>